{extend name="main" /}

{block name="title"}管理{/block}
{block name="body"}

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form id="myForm" lay-filter="myForm" class="layui-form toolbar">
                <div class="layui-form-item" id="search">

					<div class="layui-inline">
						<label class="layui-form-label">关键字：</label>
						<div class="layui-input-inline">
							<input name="keywords" class="layui-input" autocomplete="off" placeholder="输入关键字"/>
						</div>
					</div>

                    <div class="layui-inline">
						<label class="layui-form-label">创建时间</label>
						<div class="layui-input-inline">
							<input name="createDateSel" class="layui-input" placeholder="选择日期范围" autocomplete="off"/>
						</div>
					</div>

					
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="mxTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
						<button class="layui-btn icon-btn" lay-filter="mxReset" lay-submit>
							<i class="layui-icon">&#xe669;</i>重置
						</button>
                    </div>
                </div>
            </form>

			<table id="myTable" lay-filter="myTable"></table>

        </div>
    </div>
</div>
<script type="text/html" id="authTbBar">
    <a class="layui-btn layui-btn-xs" lay-event="editAction">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="titledel">删除</a>
</script> 
<!-- 主表中的操作按钮模版 --> 
<script>
	//获取父级参数
    var mData = "";
    var modelId=0;
    function child(obj){
        mData = JSON.parse(obj);
        modelId=mData.id;
        console.log(modelId);

    }
    
	var curId=0;
	//表格数据
	var tableData=[];
	


	//Layui主运行函数
    layui.use(['form','admin','laydate','table','tableEdit','soulTable'], function () {
		 laydate = layui.laydate;
         table = layui.table;
            soulTable = layui.soulTable;
			tableEdit = layui.tableEdit;
            form = layui.form;
            $ = layui.$;

	

		

		/* 渲染时间选择 */
        laydate.render({
            elem: 'input[name="createDateSel"]',
            type: 'date',
            range: true,
            trigger: 'click'
        });
        // 保存

        /* 显示费用分类表单弹窗 */
        function showSelView() {
             var layIndex = layer.open({
                type: 2,
                title: '添加编辑',
                shade: 0.5,
                fixed: false,
                area: ['80%','80%'],
                content: "{:url('table/action/titleaddview')}",
                success: function (layero, index) {
                    if(mData){
                        mData.actionid=mData.id;
                        mData.id='';
                        var iframe = window['layui-layer-iframe' + index];//拿到iframe元素
                        iframe.child(JSON.stringify(mData))//向此iframe层方法 传递参数
                    }
                }
            });
        }

        function showEditView(pData) {
             var layIndex = layer.open({
                type: 2,
                title: '编辑',
                shade: 0.5,
                fixed: false,
                area: ['80%','80%'],
                content: "{:url('table/action/titleaddview')}",
                success: function (layero, index) {
                    if(pData){
                        var iframe = window['layui-layer-iframe' + index];//拿到iframe元素
                        iframe.child(JSON.stringify(pData))//向此iframe层方法 传递参数
                    }
                }
            });
        }

		

        
		
		//右键菜单配置
		var rightMenu = {
			// 表格内容右键菜单配置
			body: [
				{
				   name: '复制单元格内容',
				   icon: 'layui-icon layui-icon-app',
				   click: function(obj) {
					   soulTable.copy(obj.text);
					   layer.msg('复制成功！');
				   }
				},			
				{
					name: '高亮当前行',
					icon: 'layui-icon layui-icon-light',
					click: function(obj) {
						obj.trElem.css('color', '#ff0000');
						obj.trElem.css('background', '#fff071');
					}
				},
				{
					name: '文字标红',
					icon: 'layui-icon layui-icon-rate-half',
					click: function(obj) {
					  obj.elem.css('color', 'red');
					}
				}
			]
		};
		
		//表格列配置
		var cols = [	
            {field: 'title_name', title: '名称',sort:true,filter: true},
            {field: 'title_name_zh', title: '中文名称'},
            {field: 'title_url', title: '路径'},
            {field: 'title_type_name', title: '请求类型'},
            {field: 'title_type_act_name', title: '操作类型'},
            {field: 'cdate', title: '创建时间',width: 170,sort:true,filter: true},
			{fixed: 'right',title: '操作',toolbar: '#authTbBar',align:'center', width: 120}			
		];		
		
		//创建表格
        myTable = table.render({
            elem: '#myTable'
            ,url: "{:url('table/action/titlelist')}?action_id="+modelId
			,data:tableData
			,toolbar: ['<p>',
                '<button lay-event="addtitleView" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
				//'<button type="button" class="layui-btn mgl-20" id="addOrders" lay-filter="addOrders" lay-submit><i class="layui-icon">&#xe624;</i>订单退款</button>',
                '</p>'].join('')
            ,page: {limit: 20}
            ,limits: [20, 50, 100, 200, 500]
			,height: $(document).height() - $('#myTable').offset().top - 40
			,even: true //开启隔行背景
  			,size: 'sm' //小尺寸的表格
			,limit: 20 //分页记录条数
			,autoSort: false
			,contextmenu: rightMenu	//右键菜单	
            ,cols: [cols] //表格列的配置
			,filter: {  //开启表格筛选配置
				items:['column','clearCache'],
				bottom: false,
				cache: true
			}	
            ,done: function (res) { //表格创建完毕后的回调方法
                soulTable.render(this);

            },
			parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
			
        });

        /* 删除 */
        function doDel(obj) {
            layer.confirm('确定要删除选中数据吗？', {
                title: '删除数据',
                skin: 'layui-layer-admin',
                shade: 0.5,
                shadeClose: true,
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                $.post("{:url('table/action/titledel')}", {
                    id: obj.data ? obj.data.id : '',
                    ids: obj.ids ? obj.ids.join(',') : ''
                }, function (res) {
                    layer.close(loadIndex);
                    if (res.code === 1) {
                        layer.msg(res.msg, {icon: 1});
                        myTable.reload();
                    } else {
                        layer.msg(res.msg, {icon: 5, anim: 6});
                    }
                }, 'json');
            });
        }

        /* 表格2头工具栏点击事件 */
        table.on('toolbar(myTable)', function (obj) {
            if (obj.event === 'addtitleView') { // 添加
                showSelView();
            }
        });

        /* 表格搜索 */
        form.on('submit(mxTbSearch)', function (data) {
            myTable.reload({where: data.field, page:1,limits:20});
            return false;
        });

        editTableCols = myTable.config.cols;
        var aopTable = tableEdit.aopObj(editTableCols); //获取一个aop对象

        aopTable.on('tool(myTable)',function (obj) {
            if (obj.event === 'editAction') {
				showEditView(obj.data); //编辑事件处理
            }	
            if (obj.event === 'titledel') { // 删除
                doDel(obj);
            }
		
        });	


	
		
    });

	
</script>
{/block}
